@import "mixin";

/**
 * 通用样式
 */
$font-42: 42px;
$font-F1: 36px;
$font-F2: 34px;
$font-F3: 30px;
$font-F4: 28px;
$font-F5: 26px;
$font-F6: 24px;
$font-F7: 22px;
$font-F8: 32px;
$color-C1: #282828;
$color-C2: #bbbbbb;
$color-C3: #e6e6e6;
$color-C4: #737373;
$color-C5: #a8a8a8;
$color-C6: #f56d9d;
$color-C7: #f5f5f5;
$color-C8: #FFFFFF;

/****************客户******************/
.details-customer-item {

  box-sizing: border-box;
  @include px2rem(height, 312px);
  @include px2rem(margin-top, 20px);
  margin-bottom: 0px;
  border-top: solid $color-C3 1px;
  border-bottom: solid $color-C3 1px;
  background: $color-C8;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

.details-customer-item-left {
  @include px2rem(width, 506px);
  @include px2rem(margin-left, 40px);
  box-sizing: border-box;
  flex-basis: auto;
}

.details-customer-item-left-top {
  border-bottom: solid $color-C3 1px;
  @include px2rem(height, 200px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.details-customer-item-left-top-status {
  border-color: #f75184;
  border-width: 1px;
  border-style: solid;
  color: #f75184;
  @include px2rem(border-radius, 6px);
  @include px2rem(margin-left, 24px);
  @include px2rem(height, 34px);
  @include px2rem(width, 92px);
  display: flex;
  justify-content: center;
}

.details-customer-item-right {
  @include px2rem(width, 204px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.details-customer-item-right img {
  @include px2rem(width, 142px);
  @include px2rem(height, 52px);
  @include px2rem(margin-top, 10px);
}

.details-customer-tab1 {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  @include px2rem(margin-top, 28px);
}

.details-customer-portrait {
  border-radius: 50%;
  @include px2rem(height, 60px);
  @include px2rem(width, 60px);
  @include px2rem(margin-right, 16px);
  box-sizing: border-box;
}

.details-customer-tab2 {
  @include px2rem(margin-top, 16px);
  @include px2rem(width, 410px);
  color: $color-C1;
  @include px2rem(font-size, $font-F8);
  font-weight: bold;
}

.details-customer-tab2 h2 {
  color: $color-C1;
  @include px2rem(font-size, $font-F6);
  font-weight: normal;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.details-customer-informationPadding {
  @include px2rem(margin-left, 10px);
}

.details-customer-item-left-bottom {
  @include px2rem(height, 118px);
  @include px2rem(font-size, $font-F6);
  color: $color-C4;
  box-sizing: border-box;
}

.details-customer-descriptionLayout {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  @include px2rem(height, 118px);
}

.details-customer-description {

}

.details-customer-description div {
  box-sizing: border-box;
  @include px2rem(padding-right, 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.details-customer-mine-arrow {
  @include px2rem(width, 10px);
  @include px2rem(height, 19px);
  box-sizing: border-box

}

.details-customer-customer-dot {
  @include px2rem(height, 8px);
  @include px2rem(width, 8px);
  @include px2rem(border-radius, 4px);
  @include px2rem(margin-bottom, 5px);
  background: $color-C5;
}

.details-customer-button {
  @include px2rem(width, 142px);
  @include px2rem(height, 52px);
}

/****************订单******************/

.details-order-item {
  @include px2rem(height, 318px);
  box-sizing: border-box;
  background: $color-C8;
  border-top: solid $color-C3 1px;
  border-bottom: solid $color-C3 1px;
  @include px2rem(margin-top, 20px);
  @include px2rem(padding-left, 20px);
  @include px2rem(padding-right, 20px);
}

.details-order-item > div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}

.details-order-tab1 {
  @include px2rem(height, 78px);
  border-bottom: solid $color-C3 1px;
}

.details-order-tab2 {
  @include px2rem(height, 160px);
  border-bottom: solid $color-C3 1px;
}

.details-order-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.details-order-user {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.details-order-company {
  @include px2rem(width, 500px);
}

.details-order-button {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.details-order-button img {
  @include px2rem(width, 142px);
  @include px2rem(height, 52px);
  @include px2rem(margin-top, 10px);
}

.details-order-tab3 {
  @include px2rem(height, 78px);
}

.details-order-portrait {
  @include px2rem(height, 60px);
  @include px2rem(width, 60px);
  @include px2rem(margin-bottom, 18px);
  @include px2rem(margin-right, 18px);
  border-radius: 50%;
}

/*overview*/

.overview-root-content {
  padding-top: 1.2rem;
}

.overview-li {
  background-color: white;
  @include px2rem(margin-top, 20px);
  border-bottom: solid $color-C3 1px;
}

.overview-li-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  @include px2rem(height, 60px);
  @include px2rem(margin-left, 40px);
  @include px2rem(margin-right, 40px);
  span {
    @include px2rem(font-size, $font-F5);
    color: $color-C1;
  }
}

/*tk customer*/

.consult-customer-shadow {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.consult-customer-pop {
  background-color: white;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-between;
  @include px2rem(border-radius, 6px);
  @include px2rem(width, 622px);
  @include px2rem(height, 889px);
  @include px2rem(margin-top, 108px);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  .consult-customer-pop-title {
    display: flex;
    align-items: center;
    justify-content: center;
    @include px2rem(margin-left, 56px);
    @include px2rem(margin-right, 56px);
    @include px2rem(height, 156px);
    border-bottom: solid $color-C3 1px;
  }
  .consult-customer-pop-list {
    @include px2rem(margin-left, 56px);
    @include px2rem(margin-right, 56px);
    @include px2rem(height, 643px);
    ul {
      width: 100%;
      @include px2rem(height, 643px);
      overflow: auto;
      li {
        display: flex;
        align-items: center;
        border-bottom: solid $color-C3 1px;
        @include px2rem(height, 142px);
        .consult-customer-pop-img-header {
          @include px2rem(width, 80px);
          @include px2rem(height, 80px);
          @include px2rem(margin-right, 26px);
          border-radius: 50%;
        }
        .consult-customer-pop-img-choose {
          @include px2rem(width, 34px);
          @include px2rem(height, 34px);
          @include px2rem(margin-right, 32px);
        }
      }
    }
    div:first-child {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 100%;
      height: 100%;
    }
  }
  .consult-customer-pop-bottom {
    border-top: solid $color-C3 1px;
    display: flex;
    @include px2rem(height, 90px);
    button {
      width: 50%;
      height: 100%;
      color: $color-C6;
      background-color: transparent;
    }
    .consult-customer-pop-button-cancel {
      border-right: solid $color-C3 1px;
    }
  }
}
